<template>
	<app-layout>
		<view class="app-pt-index">

			<view>
				<app-quick-navigation></app-quick-navigation>
			</view>

			<view class="index-nav" v-if="nav_list.length > 0">
				<app-index-nav :list="nav_list" :cat_id="cat_id" @click="changeStatus"></app-index-nav>
			</view>

			<view class="banner" v-if="banners.length > 0">
				<app-banner :list="banners"></app-banner>
			</view>

			<view class="image-ad" v-if="setting.is_advertisement == 1">
				<app-image-ad :list="setting.advertisement.list" :height="imageStyle == 8 ? 372 : 0" :imageStyle="imageStyle"></app-image-ad>
			</view>

			<view class="app-list">
				<app-product-list sign="pintuan" :list="goods_list"></app-product-list>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appIndexNav from '../components/app-index-nav.vue';
	import appBanner from '../components/app-banner.vue';
	import appImageAd from '../../../components/page-component/app-image-ad/app-image-ad.vue';
	import appProductList from '../components/app-product-list.vue';
	import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation.vue";

	export default {
		name: 'index',
		data() {
			return {
				banners: [],
				setting: {},
				nav_list: [{
					name: '热卖',
					id: 0,
				}],
				page: 1,
				page_count: 1,
				goods_list: [],
				cat_id: 0,
				imageStyle: 0,
			}
		},
		onLoad(option) {
			if (option.cat_id) {
				this.cat_id = option.cat_id;
			}
			this.$request({
				url: this.$api.pt.index,
			}).then(res => {
				if (res.code === 0) {
					this.banners = res.data.banners;
					this.setting = res.data.setting;
					let advertisement = res.data.setting.advertisement;
					let list = [];
					if (advertisement.list) {
						for (let i = 0; i < advertisement.list.length; i++) {
							list.push({
								...advertisement.list[i],
								link: {
									value: advertisement.list[i].link_url,
									open_type: advertisement.list[i].open_type,
								}
							})
						}
					}

					this.setting.advertisement.list = list;
					this.imageStyle = Number(this.setting.advertisement.type);
					console.log(this.imageStyle);
				}
			});

			this.$request({
				url: this.$api.pt.cats,
			}).then(res => {
				if (res.code === 0) {
					this.nav_list.push(...res.data.list);
					if (!option.cat_id) {
						this.cat_id = this.nav_list[0].id;
					}
					this.request(0);
				}
			});
		},

		onReachBottom() {
			if (this.page < this.page_count) {
				this.page++;
				this.request(1);
			}
		},

		methods: {
			async changeStatus(id) {
				this.cat_id = id;
				this.page = 1;
				this.request(0);
			},

			async request(status) {
				const response = await this.$request({
					url: this.$api.pt.goods,
					data: {
						page: this.page,
						cat_id: this.cat_id,
					}
				});

				if (response.code === 0) {
					if (status === 1) {
						this.goods_list.push(...response.data.list);
					} else {
						this.goods_list = response.data.list;
					}
					this.page_count = response.data.pagination.page_count;
				}
			}
		},

		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/plugins/pt/index/index',
				title: this.$children[0].navigationBarTitle,
			});
		},

		components: {
			'app-index-nav': appIndexNav,
			'app-banner': appBanner,
			'app-image-ad': appImageAd,
			'app-product-list': appProductList,
			'app-quick-navigation': appQuickNavigation,
		},
	}
</script>

<style scoped lang="scss">
	.app-pt-index {
		background-color: #f7f7f7;

		.index-nav {
			width: #{750rpx};
			height: #{92rpx};
		}

		.banner {
			margin-bottom: #{24rpx};
		}

		.app-list {
			margin-top: #{20rpx};
		}

		.image-ad {
			overflow: hidden;
		}
	}
</style>
